<template>
    <div class="desk">
       <!-- {{ menuList }} -->
       <!-- <button @click="checkout">到网页</button> -->
        <div class="nav">
           <div @click="tab(v)" v-for="v in menuList" class="it">
              <div>
                 <img width="50" :src="IconMap[v.path]" alt="">
              </div>
              <div>
                {{ v.name }}
              </div>
           </div>
           <div class="it">
              <div @click="checkout()">
                 <img width="50" :src="broswer" alt="">
              </div>
              <div>
                切换网页
              </div>
           </div>
           <div class="it">
              <div>
                 <img width="50" :src="window" alt="">
              </div>
              <div>
                退出登录
              </div>
           </div>
        </div>
        <div class="map">
            <Map w="700px" h="700px" />
            <!-- <Map @map-click="tab" id="test" w="300px" h="300px" /> -->
        </div>
    </div>

    <Vue3EasyDrag v-if="openWindow" :x="x" :y="y" :width="w " :height="h" :disabled="disabled" >
      <template #header>
        <h3 >
         {{ title }}
        </h3>
      </template>
      <div class="menu">
         <div class="list">
            <el-menu
                active-text-color="#ffd04b"
                background-color="#02151d"
                class="el-menu-vertical-demo"
                :default-active="defaultActive"
                text-color="#fff"
                :unique-opened="true"
                :router="true"
            
            >
            <el-menu-item :index="'/layout/'+v.path" v-for="v in List" >
                <el-icon><Monitor /></el-icon>
                        <span>
                            {{ v.name }}
                        </span>
           </el-menu-item>
                
               
            </el-menu>
         </div>
         <div class="item">
            <router-view/>
         </div>
      </div>
    </Vue3EasyDrag>
</template>
<script setup lang='ts'>
import {Vue3EasyDrag} from "../../components"
import { set } from "../../utils/session.ts"
import {Map} from "../../components"
import countyment from "../../assets/icon/1.png"
import peoplement from "../../assets/icon/2.png"
import hukoument from "../../assets/icon/3.png"
import partyment from "../../assets/icon/4.png"
import setting from "../../assets/icon/5.png"
import broswer from "../../assets/icon/brower.png"
import window from "../../assets/icon/window.png"
import {ref,watch} from "vue"
import router from "../../router"
const disabled=ref<boolean>(false)
const openWindow=ref<boolean>(false)
const w=ref<string>('80vw')
const h=ref<string>('80vh')
const x=ref<string>('30')
const y=ref<string>('30')
const List=ref<TreeItem[]>([])
const defaultActive=ref<string>('')// 路由高亮
watch(disabled,(n)=>{
    w.value=n?'100vw':'80vw'
    h.value=n?'100vh':'80vh'
    x.value=n?'0':x.value
    y.value=n?'0':y.value
})
const IconMap:Obj={
    setting,
    partyment,
    hukoument,
    peoplement,
    countyment,
}
const title=ref<string>('')
const props=defineProps(['checkout','menuList'])
const checkout=()=>{
        console.log(666);
        set("port",true)
        props.checkout()        
}
const tab=(v:TreeItem)=>{
   console.log(v);
   title.value=v.name
   openWindow.value=true
   List.value=v.children as TreeItem[]
   router.push("/layout/"+List.value[0].path)
   
}
// const tab=(data:number[])=>{
//     console.log(data);
    
// }
</script>
<style scoped lang="less">
 .desk{
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/desktop1.webp);
    background-size: 100% 100%;
    display: flex;
    color: white;
    .nav{
        width: 250px;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .it{
            width: 100px;
            height: 100px;
            // border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }
    }
    .map{
        flex: 1;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    
 }
 .menu{
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display:flex;
      .list{
         width: 200px;
         height: 100%;
         background-color: #02151d;
         // border: 1px solid red;

      }
      .item{
         flex: 1;
         height: 100%;
         // background: pink
      }
    }
</style>
